<template>
  <!-- 审批流 -->
  <div class="box">
    <div class="header">
      <p>审批记录:</p>
    </div>
    <InforTextToo
      :orderNumber="orderNumber"
      @findFilterData="findFilterData"
    ></InforTextToo>
    <el-row v-if="this.findFilterList">
      <el-col>
        <el-form :model="formInline" ref="formInline" :rules="rules">
          <el-row>
            <el-col style="margin-left:5%" :span="6">
              <el-form-item label="审批信息:" prop="approveStatus">
                <el-radio-group
                  v-model="approveStatus"
                  @change="approveStatusFun"
                >
                  <el-radio label="1">通过</el-radio>
                  <el-radio label="-1">退回到</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label-width="0"
                v-if="approveStatus == -1"
                prop="approveModelId"
              >
                <el-select
                  v-model="formInline.approveModelId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in findPrefixList"
                    :key="item.id"
                    :label="item.approveModelName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批要求:">
                <el-select
                  v-model="value"
                  placeholder="请选择"
                  @change="select"
                >
                  <el-option
                    :key="this.findFilterList.standardOpinion"
                    :label="this.findFilterList.standardOpinion"
                    :value="this.findFilterList.standardOpinion"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col style="margin-left:5%" :span="20">
              <el-form-item prop="approveResult">
                <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入内容"
                  v-model="formInline.approveResult"
                >
                </el-input>
                <!-- <el-input v-model="formInline.city" /> -->
              </el-form-item>
            </el-col>
            <div class="form" id="formList" v-html="tableHtml"></div>
            <el-col :span="10">
              <el-form-item
                label="授权密码（非登录密码）:"
                label-width="180px"
                prop="authorityPass"
              >
                <el-input
                  v-model="formInline.authorityPass"
                  style="width:180px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button
                  type="primary"
                  @click="primaryFun"
                  v-if="showOrderAudit"
                  >提 交</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col
        ><div class="rightText">
          <p>实际审批人:{{ employeeName }}</p>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import { getfindPrefixList, getfindFilter } from "../../assets/js/api";
import InforTextToo from "./InforTextToo";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "ExaminationApproval",
  components: { InforTextToo },
  props: {
    ProductUrl: {
      type: String
    }
  },
  data() {
    // 为空校验
    var validateNull = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("必填项不能为空"));
      } else {
        callback();
      }
    };
    return {
      employeeName: "",
      tableHtml: "",
      value: "",
      orderNumber: "",
      findFilterList: {},
      standardOpinion: "",
      findPrefixList: [],
      postStatus: [{ id: -1, approveModelName: "退回到审批前" }],
      approveStatus: "1",
      formInline: {
        approveStatus: this.approveStatus,
        authorityPass: "",
        approveModelId: "",
        approveRecordId: "",
        approveResult: ""
      },
      rules: {
        approveResult: [{ validator: validateNull, trigger: "blur" }],
        authorityPass: [{ validator: validateNull, trigger: "blur" }]
      },
      golbalPermissions: []
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.employeeName = localStorage.getItem("approvedname");
    this.orderNumber = sessionStorage.getItem("orderNumber");
    //获取表格代码
    this.getfindFilter(this.orderNumber);
    this.formInline.approveStatus = this.approveStatus;
  },
  computed: {
    //提交按钮
    showOrderAudit: function() {
      return checkPermiss("business:fund:audit", this.golbalPermissions);
    }
  },
  methods: {
    //获取表格代码
    getfindFilter(id) {
      getfindFilter(id).then(res => {
        if (res.data != null) {
          this.tableHtml = res.data.modelCode;
        }
      });
    },
    findFilterData(data) {
      this.findFilterList = data;
      this.getfindPrefixList();
    },
    // 审批状态数据
    getfindPrefixList() {
      if (this.findFilterList) {
        getfindPrefixList(this.findFilterList.approveRecordId).then(res => {
          this.findPrefixList = this.postStatus.concat(res.data);
        });
      }
    },
    // 通过状态
    approveStatusFun(val) {
      if (val == -1) {
        this.$refs.formInline.resetFields();
      } else {
        this.$refs.formInline.resetFields();
        this.formInline.approveModelId = "";
      }
    },
    // 提交按钮
    primaryFun() {
      if (this.approveStatus == -1) {
        if (!this.formInline.approveModelId) {
          this.$message({
            message: "请选择退回状态",
            type: "error"
          });
          return;
        } else if (!this.formInline.authorityPass) {
          this.$message({
            message: "请输入密码",
            type: "error"
          });
          return;
        } else {
          this.subim(this.approveStatus);
        }
      } else {
        this.$refs.formInline.validate(valid => {
          if (!valid) {
            return;
          } else {
            this.$delete(this.formInline, "approveModelId");
            this.subim(this.approveStatus);
          }
        });
      }
    },
    subim(status) {
      let that = this;
      this.formInline.approveRecordId = this.findFilterList.approveRecordId;
      this.formInline.approveStatus = status;
      //得到插入表格的数据
      let form = document.getElementById("formList");
      let tagElements = form.getElementsByTagName("input");
      let tagText = form.getElementsByTagName("textarea");
      let tagSelect = form.getElementsByTagName("select");
      let formList = {};
      for (let j = 0; j < tagElements.length; j++) {
        formList[tagElements[j].name] = tagElements[j].value;
      }
      for (let j = 0; j < tagText.length; j++) {
        formList[tagText[j].name] = tagText[j].value;
      }
      for (let j = 0; j < tagSelect.length; j++) {
        formList[tagSelect[j].name] = tagSelect[j].value;
      }
      let obj = Object.assign(formList, this.formInline);
      // const formData = new FormData();
      // Object.keys(obj).map(key => {
      //   formData.append(key, obj[key]);
      // });;
      this.axios
        .post("/business/order/audit", obj, {
          //请求头配置
          headers: {
            "Content-Type": "application/json;charset=UTF-8"
          }
        })
        .then(function(res) {
          if (res.data.code == 200) {
            that.$message({
              message: res.data.message,
              type: "success"
            });
            that.$router.replace({ path: that.ProductUrl });
          } else {
            that.$message({
              message: res.data.message,
              type: "error"
            });
          }
        })
        .catch(function(error) {
          that.$message({
            message: error.message,
            type: "error"
          });
        });
    },
    select(key) {
      this.formInline.approveResult = key;
    }
  }
};
</script>

<style scoped trpe="less">
.box {
  height: auto;
}
.header {
  height: 40px;
  text-align: left;
  padding: 10px 0 0 20px;
}
::v-deep .el-form-item__content {
  text-align: left;
}
.rightText {
  height: 50px;
  line-height: 50px;
  text-align: left;
  padding-left: 10px;
}
.form {
  width: 100%;
  overflow: hidden;
  margin: 20px 0;
}
</style>
